<template>
	<view style="margin-bottom: 30rpx;">
		<view class="bg">
			<view class="personinfo">
				<image class="avatar" :src="infoData.data.avatar"></image>
				<text>{{infoData.data.name}}</text>
			</view>
		</view>
		<view class="white-card mine">
			<view class="rank-content">
				<text>邀请排行榜</text>
			</view>
			<view class="rank">
				<view class="flex-center">
					<image class="avatar" :src="infoData.data.avatar"></image>
					<text class="avatar-name">{{infoData.data.name}}</text>
				</view>

				<text class="sub">已邀请{{infoData.list.length}}人</text>
				<!-- #ifdef MP-WEIXIN -->
				<u-button type="primary" shape="circle" open-type="share" :custom-style="customStyle">立即分享给好友</u-button>
				<!-- #endif -->
			</view>

		</view>
		<view class="white-card rank-list">
			<view class="item" v-for="(item,index) in infoData.list" :key="index">
				<view style="display: flex;align-items: center;">
					<text class="first" v-if="index==0">{{index+1}}</text>
					<text class="second" v-else-if="index==1">{{index+1}}</text>
					<text class="third" v-else-if="index==2">{{index+1}}</text>
					<text class="other" v-else>{{index+1}}</text>
					<image class="avatar" style="margin-left: 36rpx;" :src="item.avatar"></image>
				</view>
				<text>{{item.name}}</text>
				<text>已邀请{{item.invitenum}}人</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uButton from "../../uview-ui/components/u-button/u-button.vue";
	import uImage from "@/uview-ui/components/u-image/u-image.vue";
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log('res', res)
			}
			return this.shareInfo
		},
		components: {
			uButton,
			uImage
		},
		created() {
			this.$api.getInviteInfo().then(res => {
				this.infoData = res.data;
			})
		},
		data() {
			return {
				shareInfo: {
					title: '水浒盲盒',
					path: '/pages/person/person?invite=' + 1,
				},
				infoData: {},
				customStyle: {
					background: "#07D0D2",
					color: "#FFFFFF",
					fontSize: "24rpx",
					padding: "0 60rpx",
					position: "absolute",
					bottom: "24rpx",
					left: "25%"
				},
				rankList: [{
					url: '../../static/img/qq.png',
					name: '微信名称',
					number: '30'
				}, {
					url: '../../static/img/qq.png',
					name: '微信名称',
					number: '30'
				}, {
					url: '../../static/img/qq.png',
					name: '微信名称',
					number: '30'
				}, {
					url: '../../static/img/qq.png',
					name: '微信名称',
					number: '30'
				}],

			};
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 393rpx;
		background-image: url(/static/img/invitebg.png);
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;

		.personinfo {
			position: absolute;
			bottom: -72rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar {
				width: 149rpx;
				height: 149rpx;
				border-radius: 50%;
			}

			text {
				font-size: 24rpx;
				font-weight: bold;
				color: #202020;
			}
		}
	}

	.mine {
		margin: 140rpx 90rpx 0 90rpx;
		height: 272rpx;
		position: relative;
		display: flex;
		align-items: center;

		.rank-content {
			position: absolute;
			top: -40rpx;
			left: -21rpx;
			width: 606rpx;
			height: 78rpx;
			background: #07D0D2;
			border-radius: 11rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 28rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFEFE;
			}

		}

		.rank {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0 30rpx 30rpx 30rpx;

			.avatar {
				margin-right: 26rpx;
			}

			.sub {
				color: $uni-text-color;
				font-size: 24rpx;
			}
		}
	}

	.rank-list {
		margin: 40rpx 90rpx 0 90rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E5E5E5;
			height: 141rpx;
			padding-right: 14rpx;

			.first {
				width: 40rpx;
				height: 40rpx;
				background: #F39800;
				text-align: center;
				color: $uni-text-color;
				font-weight: bold;
			}

			.second {
				width: 40rpx;
				height: 40rpx;
				background: #F8B551;
				text-align: center;
				color: $uni-text-color;
				font-weight: bold;
			}

			.third {
				width: 40rpx;
				height: 40rpx;
				background: #FACD89;
				text-align: center;
				color: $uni-text-color;
				font-weight: bold;
			}

			.other {
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				text-align: center;
				color: $uni-text-color;
				font-weight: bold;
			}
		}
	}
</style>
